<template>
  <div ref="productContainer" class="product-container">
    <FilterTree
      :treeData="paramTree"
      @updateParams="updateParams"
      :searchPlaceholder="'请输入款号、品类、颜色等关键词搜索'"
      @updateSearchText="updateSearchText"
      :gender="gender"
      :initialRootArray="initialRootArray"
      :searchKeep="['品牌', '类目']"
      v-show="gender != null"
      :useActiveCodeObj="true"
    ></FilterTree>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="16">
          <!-- <a-col :md="8" :sm="24">
            <a-form-item label="款号">
              <a-input v-model="queryParam.name" placeholder="请输入" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="品牌" required>
              <a-select v-model="queryParam.brandId" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode" @change="e => handleChangeSelect(e, 'brand')">
                <a-select-option v-for="(item, index) in brandList" :key="index" :value="item.key">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="大类" required>
              <a-select v-model="queryParam.bigCategoryId" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode" @change="e => handleChangeSelect(e, 'big')">
                <a-select-option v-for="(item, index) in categoryList" :key="index" :value="item.key">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="小类">
              <a-select
                v-model="queryParam.smallCategoryId"
                default-value="all"
                placeholder="请选择"
                :getPopupContainer="triggerNode => triggerNode.parentNode"
                @change="e => handleChangeSelect(e, 'small')"
              >
                <a-select-option value="all">全部</a-select-option>
                <a-select-option v-for="(item, index) in scategoryList" :key="index" :value="item.key">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->

          <!-- <a-col :md="8" :sm="24">
            <a-form-item label="季节">
              <a-select v-model="queryParam.seasonId" placeholder="请选择" default-value="all" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <a-select-option value="all">全部</a-select-option>
                <a-select-option v-for="(item, index) in seasonsList" :key="index" :value="item.id">{{ item.attribname }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="年份">
              <a-select v-model="queryParam.year" placeholder="请选择" default-value="all" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <a-select-option value="all">全部</a-select-option>
                <a-select-option v-for="(item, index) in yearsList" :key="index" :value="item.attribname">{{ item.attribname }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <!-- 默认尺码 -->
          <!-- <a-col :md="8" :sm="24">
            <a-form-item label="尺码" required>
              <a-select v-model="queryParam.defaultSizeNo" placeholder="请选择" :dropdownStyle="{zIndex:'5'}" @change="e=>handleChangeSelect(e,'size')">
                <a-select-option v-for="(item,index) in sizeList" :key="index" :value="item.key">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-col :xl="8" :lg="12" :sm="24">
            <a-form-item label="排序" required>
              <a-select v-model="queryParam.sorted" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode" @change="searchList">
                <a-select-option :value="2">按销量</a-select-option>
                <a-select-option :value="1">按新品</a-select-option>
                <!-- <a-select-option :value="3">综合</a-select-option> -->
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="12" :sm="24" v-if="!storeIdByLink">
            <a-form-item label="货仓" required>
              <a-select v-model="queryParam.storeId" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode" @change="changeStore">
                <!-- <a-select-option value="417608-31066">零拣+box仓</a-select-option> -->
                <!-- <a-select-option value="417608">box仓</a-select-option> -->
                <a-select-option value="JNBYP">零拣+box仓+江南布衣+</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="12" :sm="24" v-if="isEmpty">
            <a-form-item label="仅看有货">
              <a-switch default-checked @change="switchChange" v-model="queryParam.isStockNotEmpty" />
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="12" :sm="24">
            <a-form-item label="波段">
              <a-tooltip>
                <template slot="title" v-if="queryParam.bandId && queryParam.bandId.length > 3">
                  {{ bandsName(queryParam.bandId, bandsList) }}
                </template>

                <a-select
                  mode="multiple"
                  :maxTagCount="3"
                  autoClearSearchValue
                  show-search
                  allowClear
                  v-model="queryParam.bandId"
                  placeholder="请选择波段"
                  :filter-option="filterOption"
                  @change="searchList"
                >
                  <a-select-option v-for="(item, index) in bandsList" :key="index" :value="item.id">{{ item.attribname }}</a-select-option>
                </a-select>
              </a-tooltip>
            </a-form-item>
          </a-col>
          <a-col :xl="8" :lg="12" :sm="24" style="l-h-price">
            <div class="show-change">
              <a-form-item label="吊牌价" class="input-content">
                <div class="change-content">
                  <a-input-number
                    :min="0"
                    :max="99999"
                    :step="1"
                    :precision="2"
                    placeholder="最低"
                    v-model="lowPrice"
                    ref="lPrice"
                    @focus="showChangePrice"
                    @change="changeLPrice"
                    @keyup.enter="changePriceConfirm"
                  />
                  ~
                  <a-input-number
                    :min="0"
                    :max="99999"
                    :step="1"
                    :precision="2"
                    placeholder="最高"
                    v-model="highPrice"
                    ref="hPrice"
                    @focus="showChangePrice"
                    @change="changeHPrice"
                    @keyup.enter="changePriceConfirm"
                  />
                </div>
              </a-form-item>
              <div class="change-price-btn" v-show="!readonly">
                <a-button type="link" size="small" @click="changePriceClear">清空</a-button>
                <a-button size="small" @click="changePriceCancel" style="margin-left: 8px">取消</a-button>
                <a-button size="small" type="primary" @click="changePriceConfirm" style="margin-left: 8px"> 确定</a-button>
              </div>
            </div>
          </a-col>
          <a-col :lg="8" :md="12" :sm="24">
            <a-form-item label="加购过">
              <a-switch default-checked @change="switchChange" v-model="queryParam.isAddTrolley" />
            </a-form-item>
          </a-col>
          <!-- <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden', marginBottom: 0 }">
              <a-button type="primary" @click="searchList">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
            </span>
          </a-col> -->
        </a-row>
      </a-form>
    </div>
    <!-- 商品列表 -->
    <div class="ant-pro-pages-list-projects-cardList">
      <a-list :loading="loading" :data-source="productList" :grid="{ gutter: 0 }">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-card class="ant-pro-pages-list-projects-card" hoverable>
            <img slot="cover" v-lazy="item.imgurl ? item.imgurl : 'https://img.bzhz.jnbygroup.com/cloth.png'" :alt="item.value" @click="open(item)" />
            <p>款号：{{ item.name }}</p>

            <!-- "0 无任何标签   1 搭配过  2 搭配过同款   3 购买过  4 购买过同款"  5加购过-->
            <p class="tag yellow" v-if="item.tagStatus == 1">搭配过</p>
            <p class="tag yellow" v-else-if="item.tagStatus == 2">搭配过同款</p>
            <p class="tag red" v-else-if="item.tagStatus == 3">购买过</p>
            <p class="tag red" v-else-if="item.tagStatus == 4">购买过同款</p>
            <p class="tag green" v-else-if="item.tagStatus == 5">加购过</p>
            <p class="recommend-look" @click="showRecommend(item)" v-if="item.inLook == 1"><a-icon type="search" />推荐搭配</p>
            <div class="cardItemContent">
              <h3>
                <span class="topping" v-if="item.topTags && item.topTags.length > 0">{{ item.topTags[0] }}</span
                >{{ item.value }}
              </h3>
              <p class="price">
                <a-skeleton :loading="item.promotionPrice > -1 ? false : true" active style="" :paragraph="false">
                  <span class="red">¥{{ item.promotionPrice.toFixed(2) }}</span>
                </a-skeleton>
                <span class="origin" style="text-decoration: line-through; margin-left: 8px">¥{{ item.price.toFixed(2) }}</span>
              </p>
              <p>{{ item.colorno }}/{{ item.color_name }}</p>
              <p>
                <!-- <span>销量：{{ item.sales_num }}</span> -->
                <span class="blue">库存：{{ item.currentSku.stock }}<span class="neitao" v-if="item.currentSku.ifEb">内淘</span></span>
              </p>

              <div class="size-box">
                <a-radio-group v-model="item.currentSku.sizeno" button-style="solid" @change="e => sizeChange(e, index)">
                  <a-radio-button :value="sizeItem.sizeno" v-for="(sizeItem, sizeIndex) in item.skus" :key="sizeIndex" :id="sizeItem.id" :disabled="sizeItem.stock > 0 ? false : true">
                    <a-tooltip>
                      <template slot="title">
                        {{ sizeItem.stylepartsize_model }}
                      </template>
                      <span class="sizename">{{ sizeItem.size_name }}</span>
                    </a-tooltip>
                  </a-radio-button>
                </a-radio-group>
              </div>
            </div>
            <template v-if="showSpuStock">
              <a-tooltip placement="topLeft" overlayClassName="bgc_tooltip" :overlayStyle="{ maxWidth: '300px' }" trigger="click" @visibleChange="visible => triggerTooltip(visible, item)">
                <template slot="title">
                  <template v-if="item.skuOptions && item.skuOptions.length > 0">
                    <div class="tooltipwrap_left">
                      <span>颜色</span>
                      <span v-for="(newsize, newindex2) in item.skuOptions[0].children" :key="newindex2">{{ newsize.label }}</span>
                    </div>
                    <div class="tooltipwrap_right">
                      <div v-for="(newcolor, newindex) in item.skuOptions" :key="newindex">
                        <span :class="{ checked: newcolor.value == item.colorno }">{{ newcolor.value }}/{{ newcolor.label }}</span>
                        <span v-for="(newstock, newstockindex) in newcolor.children" :key="newstockindex">{{ newstock.stock }}</span>
                      </div>
                    </div>
                  </template>
                  <div v-else class="loading-stock">
                    <a-spin />
                  </div>
                </template>
                <a style="margin-bottom: 10px; display: block; width: 60px">查看库存</a>
              </a-tooltip>
            </template>
            <div class="btn">
              <template v-if="allowGetTag && addProduct">
                <a-skeleton :loading="loadingBtn" active style="" :paragraph="false">
                  <a-button type="primary" block disabled v-if="item.preSales">预售</a-button>
                  <a-button type="primary" icon="plus" :loading="item.iconLoading" @click="addGoods(item, index)" block v-else></a-button>
                </a-skeleton>
              </template>
              <template v-if="!allowGetTag && addProduct">
                <a-button type="primary" icon="plus" :loading="item.iconLoading" @click="addGoods(item, index)" block></a-button>
              </template>
              <div v-if="!addProduct" class="multi-btn">
                <a-button @click="openSimilar(item)">相似商品</a-button>
                <a-button type="primary" @click="sendProduct(item, $event)" class="send-good" :disabled="item.spuStock == 0">发送商品</a-button>
              </div>
            </div>
          </a-card>
        </a-list-item>
      </a-list>
      <p class="bottom-tip" v-show="showBottom && productList.length > 0">
        <a-spin v-if="loadingMore" />
        <span v-else>没有更多啦</span>
      </p>
    </div>
    <!-- 商详 -->
    <GoodInfoModal ref="goodInfoModal" :weid="weid" :modalWidth="isBox ? '60vw' : '80vw'" :isBox="isBox" @sendProduct="sendProduct"></GoodInfoModal>
    <!-- 推荐LOOK -->
    <recommend-look-draw
      ref="recommendLookDraw"
      :storeId="queryParam.storeId"
      :storeIdByLink="storeIdByLink"
      :unionId="unionId"
      :isBox="isBox"
      :weid="weid"
      @refreshShoppingCart="updateShoppingCart"
      @sendProduct="sendProduct"
      @sendLook="sendLook"
    />
    <!-- 相似商品 -->
    <similar-goods-draw
      ref="similarGoodsDraw"
      :storeIdByLink="storeIdByLink"
      :weid="weid"
      :showSpuStock="true"
      :storeId="queryParam.storeId"
      :unionId="unionId"
      :isBox="isBox"
      :addProduct="addProduct"
      @sendProduct="sendProduct"
    ></similar-goods-draw>
  </div>
</template>
<script>
import { queryGoods, queryDim, queryStock, addStylingCart, goodsDetail, getSizeNos, queryGoodsList, batchTagsByUnionIdAndskc } from '@/api/box/workbench'
import { batchGetProductPromotionPrice } from '@/api/box/api'
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import FilterTree from '@/views/box/components/FilterTree'
import GoodInfoModal from '../../../components/GoodInfoModal'
import RecommendLookDraw from './RecommendLookDraw'
import SimilarGoodsDraw from './similarGoodsDraw'
import { lookMixin } from '../mixin'
import { skusStockMixin } from '@/views/box/util/mixin'

export default {
  mixins: [lookMixin, skusStockMixin],
  props: {
    unionId: {
      type: String,
      default: ''
    },
    isEmit: {
      // 是否调用外部方法
      type: Boolean,
      default: false
    },
    gender: {
      type: [String, Number],
      default: null
    },
    allowGetTag: {
      // 是否调用batchTagsByUnionIdAndskc接口
      type: Boolean,
      default: true,
      required: false
    },
    allowGetPrice: {
      // 是否调用batchGetProductPromotionPrice接口
      type: Boolean,
      default: true,
      required: false
    },
    addProduct: {
      // 添加商品
      type: Boolean,
      default: true,
      required: false
    },
    showSpuStock: {
      // 查看spu库存
      type: Boolean,
      default: false,
      required: false
    },
    storeIdByLink: {
      type: [String, Number],
      default: null,
      required: false
    },
    weid: {
      type: [String, Number],
      default: null,
      required: false
    },
    // 微商城xcx品牌
    weBrand: {
      type: String,
      default: '',
      required: false
    },
    isEmpty: {
      // 是否显示筛选项：是否有货
      type: Boolean,
      default: true,
      required: false
    },
    forCollocation: {
      // 为素材渠道提供判断
      type: Boolean,
      default: false,
      required: false
    }
  },
  components: {
    FilterTree,
    GoodInfoModal,
    RecommendLookDraw,
    SimilarGoodsDraw
  },
  data() {
    return {
      categoryList: [],
      scategoryList: [],
      brandList: [],
      bandsList: [],
      seasonsList: [],
      sizeList: [],
      yearsList: [],
      checked: [],
      pageSize: 20,
      current: 1,
      total: 0,
      pages: 0,
      queryParam: {
        isStockNotEmpty: true, // 有货：1；全部：0
        isAddTrolley: false, // 加购过
        // defaultSizeNo: '', // 默认尺码
        // smallCategoryId: [],
        // bigCategoryId: '',
        bandIds: [],
        brandIds: [],
        years: [],
        seasonIds: [],
        sorted: 2,
        storeId: 'JNBYP'
      },
      productList: [],
      data: {},
      stockList: [],
      form: this.$form.createForm(this),
      loading: true,
      loadingMore: true,
      showLoadingMore: false,
      userInfo: Vue.ls.get(USER_INFO),
      paramTree: [],
      readonly: true,
      lowPrice: '',
      highPrice: '',
      initialRootArray: [],
      showBottom: false,
      isRefreshBool: false,
      isBox: true,
      loadingBtn: true
    }
  },
  computed: {
    bandsName(arr, list) {
      return (arr, list) => {
        if (arr && arr.length > 0) {
          let newList = []
          list.forEach(item => {
            arr.forEach(child => {
              if (child == item.id) {
                newList.push(item.attribname)
              }
            })
          })
          return newList.join('，')
        }
      }
    }
  },
  watch: {
    unionId(value, oldvalue) {
      // console.log(value, oldvalue)
    },
    gender(val) {
      if (val != null) {
        // 预处理Tree
        this.handleInitalTree(this.paramTree)
        this.initialBrandGender(this.paramTree)
      }
    }
  },
  mounted() {
    if (this.storeIdByLink) {
      this.queryParam.storeId = '417608-31066'
      this.queryParam.isStockNotEmpty = false
      this.queryParam.weiMenProductId = 1
      this.queryParam.weid = this.weid
      this.queryParam.sorted = 1
      this.isBox = false
    }
    if (this.forCollocation) {
      this.queryParam.isStockNotEmpty = false
    }
    if (this.isEmit) {
      window.addEventListener('scroll', this.handleDrawScroll, true)
    } else {
      window.addEventListener('scroll', this.handleScroll, true)
    }
    // 初始化store
    this.$emit('getStoreId', 'JNBYP')
    this.getSelectList()
  },
  destroyed() {
    if (this.isEmit) {
      window.removeEventListener('scroll', this.handleDrawScroll, true)
    } else {
      window.removeEventListener('scroll', this.handleScroll, true)
    }
  },

  methods: {
    // 仅看box仓
    switchChange(checked) {
      console.log(`a-switch to ${checked}`)
      this.searchList()
    },
    changeStore(value) {
      console.log(value)
      this.$emit('getStoreId', value)
      this.searchList()
    },
    // select Change
    handleChangeSelect(value, type) {
      console.log(value, type)
      switch (type) {
        case 'big':
          const option = this.categoryList.filter(item => {
            if (item.key === value) {
              return item
            }
          })
          this.scategoryList = option[0].childCategory
          this.queryParam.smallCategoryId = 'all'
          // 默认尺码
          /* this.brandList = option[0].brands
              this.queryParam.brandId = this.brandList[0].key
              this.sizeList = this.brandList[0].size
              this.queryParam.defaultSizeNo = this.sizeList[0].key */
          break
        case 'brand':
          this.sizeList = []
          this.queryParam.defaultSizeNo = ''
          const sizeItem = this.brandList.filter(item => {
            if (item.key === this.queryParam.brandId) {
              return item
            }
          })
          this.sizeList = sizeItem[0].size
          console.log(this.sizeList)
          // // 默认尺码
          /* const hasSmall = this.sizeList.filter(item => item.name === 'S')
          if (hasSmall.length > 0) {
            this.queryParam.defaultSizeNo = hasSmall[0].key
          } else {
            this.queryParam.defaultSizeNo = this.sizeList[0].key
          } */
          break
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },

    // 修改价格
    showChangePrice() {
      this.readonly = false
    },
    changeLPrice(v) {
      this.lowPrice = v
    },
    changeHPrice(v) {
      this.highPrice = v
    },
    // 修改价格确认/取消/清空
    changePriceConfirm() {
      this.readonly = true
      this.$refs.lPrice.blur()
      this.$refs.hPrice.blur()
      this.queryParam.lprice = this.lowPrice
      this.queryParam.gprice = this.highPrice
      this.searchList()
    },
    changePriceCancel() {
      this.readonly = true
      this.$refs.lPrice.blur()
      this.$refs.hPrice.blur()
      this.lowPrice = this.queryParam.lprice
      this.highPrice = this.queryParam.gprice
    },
    changePriceClear() {
      this.readonly = true
      this.$refs.lPrice.blur()
      this.$refs.hPrice.blur()
      this.lowPrice = ''
      this.highPrice = ''
      this.queryParam.lprice = ''
      this.queryParam.gprice = ''
      this.searchList()
    },
    // 搜索列表
    searchList() {
      // window.scrollTo(0, 0)
      this.loading = true
      this.showBottom = false
      this.isRefreshBool = false
      this.current = 1
      this.productList = []
      // console.log('searchList', this.queryParam)
      if (this.storeIdByLink) {
        this.queryParam.storeId = '417608-31066'
        this.queryParam.isStockNotEmpty = false
        this.queryParam.weiMenProductId = 1
        this.queryParam.weid = this.weid
        this.isBox = false
      }
      const param = JSON.parse(JSON.stringify(this.queryParam))
      this.fetchList(param)
    },
    resetList() {
      this.queryParam.name = ''

      this.queryParam.isAddTrolley = false
      this.queryParam.smallCategoryId = 'all'
      this.queryParam.year = 'all'
      this.queryParam.bandId = 'all'
      this.queryParam.seasonId = 'all'
      this.queryParam.gPrice = ''
      this.queryParam.lPrice = ''
      this.queryParam.sorted = 2
      if (!this.storeIdByLink) {
        this.queryParam.storeId = 'JNBYP'
        this.queryParam.isStockNotEmpty = true
      } else {
        this.queryParam.storeId = '417608-31066'
        this.queryParam.isStockNotEmpty = false
        this.queryParam.weiMenProductId = 1
        this.queryParam.weid = this.weid
        this.queryParam.sorted = 1
      }
      if (this.forCollocation) {
        this.queryParam.isStockNotEmpty = false
      }
      const big = this.categoryList[0].key
      this.queryParam.bigCategoryId = big
      const brand = this.brandList[0].key
      this.queryParam.brandId = brand
      this.handleChangeSelect(brand, 'brand')
      this.searchList()
    },
    // get select Option
    async getSelectList() {
      await queryDim()
        .then(res => {
          if (res.code === 0) {
            this.bandsList = res.data.bandsV2
            // 2203 搭配师平台优化一期
            /*
            this.seasonsList = res.data.seasons
            this.yearsList = res.data.years
            this.categoryList = res.data.categoryTrees
            this.scategoryList = this.categoryList[0].childCategory
            this.brandList = this.categoryList[0].brands
            this.queryParam.brandId = this.brandList[0].key
            this.queryParam.bigCategoryId = this.categoryList[0].key
            const sizeItem = this.brandsList.filter(item => {
              if (item.key === this.queryParam.brandId) {
                return item
              }
            })
            this.sizeList = sizeItem[0].size */

            // 默认尺码
            /* const hasSmall = this.sizeList.filter(item => item.name === 'S')
            if (hasSmall.length > 0) {
              this.queryParam.defaultSizeNo = hasSmall[0].key
            } else {
              this.queryParam.defaultSizeNo = this.sizeList[0].key
            } */

            /* console.log(this.queryParam)
            const param = JSON.parse(JSON.stringify(this.queryParam))
            this.fetchList(param) */
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('getSelectList:' + err)
        })
      await getSizeNos().then(res => {
        if (res.code == 0) {
          this.paramTree = JSON.parse(JSON.stringify(res.data))
          for (let item of this.paramTree) {
            Object.assign(item, {
              isMuilt: true,
              isCustom: false,
              checkList: [],
              radioValue: null
            })
            if (item.name == '类目') {
              item.toggleNum = 5
              item.toggle = false
            }
          }
          // 预处理Tree
          this.handleInitalTree(this.paramTree)
          this.initialBrandGender(this.paramTree)
          // console.log('paramTree', this.paramTree)
        }
      })
    },
    handleInitalTree(data) {
      for (let item of data) {
        let arr = item.children.filter(e => e.children !== undefined)
        if (item.children && arr.length > 0) {
          this.handleInitalTree(item.children)
        } else {
          Object.assign(item, {
            checkValue: [],
            checkList: [],
            indeterminate: false,
            checkAll: false
          })
        }
      }
    },
    // 初始化品牌性别
    initialBrandGender(list) {
      // 女（0）：JNBY、less；男1:CROQUIS、A PERSONAL TOTE 73；无性别-1：无默认品牌
      // console.log('initialBrandGender-paramTree', this.paramTree)
      // console.log('initialBrandGender:', this.gender)
      for (let item of list) {
        if (item.name == '品牌') {
          if (this.gender == 0) {
            item.checkValue = item.children.filter(e => e.code == '2') //2jnby 5less
          } else if (this.gender == 1) {
            item.checkValue = item.children.filter(e => e.code == '3') //3速写 57apn
          }
          // 微商城陪逛初始品牌
          if (this.weBrand != '') {
            item.checkValue = item.children.filter(e => e.code == this.weBrand) //3速写 57apn
          }
          if (item.checkValue.length > 0) item.checkList = item.checkValue.map(e => e.code)
        }
      }
      this.initialRootArray = []
      if (this.gender != null) {
        for (let item of list) {
          if (item.name == '品牌') {
            this.initialRootArray.push({
              checkValue: item.checkValue,
              title: item.name,
              names: item.checkValue.length > 0 ? item.checkValue.map(a => a.name) : [],
              codes: item.checkValue.length > 0 ? item.checkValue.map(a => a.code) : []
            })
          } else {
            this.initialRootArray.push({
              checkValue: [],
              title: item.name,
              names: [],
              codes: []
            })
          }
        }
      }

      this.updateParams(this.initialRootArray)
    },
    async fetchList(d) {
      try {
        const dataList = await this.getList(d)
        // console.log(dataList)
        if (dataList.length > 0) {
          if (this.isBox) {
            let skuIds = []
            let ids = []
            for (var i = 0; i < dataList.length; i++) {
              const skusSort = dataList[i].skus
              if (skusSort != null && skusSort.length > 0) {
                skusSort.sort(this.compare('sizeno'))
                // 默认尺码
                /* const defaultId = dataList[i].skus.filter(subItem => {
                if (subItem.sizeno === this.queryParam.defaultSizeNo) {
                  return subItem
                }
              })
              if (defaultId.length > 0) {
                skuIds.push(defaultId[0].id)
              } */
              } else if (skusSort == null) {
                dataList[i].skus = []
              }
              ids = ids.concat(dataList[i].skus)
            }
            skuIds = ids.map(e => e.id)
            // console.log(skuIds)
            if (skuIds.length > 0) {
              // 查询库存
              this.stockList = await this.getStock(skuIds)
              // console.log(this.stockList)
              for (var z = 0; z < dataList.length; z++) {
                const skus = dataList[z].skus
                for (var j = 0; j < skus.length; j++) {
                  const result = this.stockList.filter(item => {
                    if (skus[j].id === item.skuId.toString()) {
                      return item
                    }
                  })
                  if (result.length > 0) {
                    skus[j].stock = result[0].stock
                    skus[j].ifEb = result[0].ifEb
                    // dataList[z].currentSku.stock = result[0].stock
                  }
                }

                const curSku = dataList[z].skus.filter(e => e.stock > 0)
                if (curSku.length > 0) {
                  dataList[z].currentSku = {
                    stock: curSku[0].stock,
                    sizeno: curSku[0].sizeno,
                    id: curSku[0].id,
                    ifEb: curSku[0].ifEb
                  }
                }
                /****  2021-11-2 End 新增取中有货sku中第一个尺码  ****/
              }
            }
            // console.log(dataList)
          } else {
            /* let spuIds = dataList.map(e => e.id)
            let spuStock = await this.getSpuStock(spuIds)
            if (spuStock.length > 0) {
              for (let item of dataList) {
                let re = spuStock.filter(e => e.productId == item.id)
                if (re.length > 0) {
                  item.spuStock = parseInt(re[0].qyt)
                } else {
                  item.spuStock = 0
                }
              }
            } */
          }
          /* 20220516 过滤列表 仅看有货时 所有sku都无库存的商品 */
          let finalList = []
          if (this.queryParam.isStockNotEmpty) {
            let filterDataList = dataList.filter(e => {
              let emptySku = e.skus.filter(e => e.stock == 0)
              if (emptySku.length != e.skus.length) {
                return e
              }
            })
            finalList = filterDataList
          } else {
            finalList = dataList
          }
          /* 20220516 过滤列表 仅看有货时 所有sku都无库存的商品 */
          this.loading = false
          this.isRefreshBool = true
          this.concatList(finalList)
        } else {
          this.isRefreshBool = false
          this.loading = false
          this.showButtom = false
          this.loadingMore = false
        }
      } catch (err) {
        console.log(err)
      }
    },
    // get dataList
    getList(d) {
      // console.log(d)

      // delete d.defaultSizeNo
      /* if (d.smallCategoryId === 'all') {
        delete d.smallCategoryId
      }
      if (d.year === 'all') {
        delete d.year
      }
      if (d.seasonId === 'all') {
        delete d.seasonId
      }
      if (d.bandId === 'all') {
        delete d.bandId
      } */
      if (d.gprice === '') {
        delete d.gprice
      }
      if (d.lprice === '') {
        delete d.lprice
      }
      if (d.name === '') {
        delete d.name
      }
      if (d.name) {
        d.name = d.name.trim()
        /* d = {
          name: d.name.trim(),
          storeId: d.storeId
          // isStockNotEmpty: d.isStockNotEmpty
        } */
      }
      const data = {
        page: {
          pageNo: this.current,
          pageSize: this.pageSize
        },
        requestData: d
      }
      if (d.name) {
        data.requestData.isStockNotEmpty = 0
      } else {
        data.requestData.isStockNotEmpty = d.isStockNotEmpty ? 1 : 0
      }

      data.requestData.isAddTrolley = d.isAddTrolley ? 1 : 0
      data.requestData.unionId = this.unionId
      return queryGoodsList(data)
        .then(res => {
          // console.log(res)
          if (res.code === 0) {
            this.current = res.page.pageNo
            this.total = res.page.count
            this.pages = res.page.pages
            if (this.current == this.pages) {
              this.isRefreshBool = false
            }
            const dataList = res.data.map(item => {
              const iconLoading = false
              var currentSku = {
                stock: 0,
                sizeno: '',
                id: ''
              }
              var promotionPrice = -1
              if (item.skus != null) {
                // 默认尺码
                /* const skus = item.skus.filter(skuitem => {
                  if (skuitem.sizeno === this.queryParam.defaultSizeNo) {
                    return item
                  }
                })
                if (skus.length > 0) {
                  currentSku.stock = skus[0].stock
                  currentSku.id = skus[0].id
                  currentSku.sizeno = skus[0].sizeno
                } */

                // 过滤重复sku
                /* for (var i = 0; i < item.skus.length; i++) {
                  for (var j = i + 1; j < item.skus.length; ) {
                    if (item.skus[i].id === item.skus[j].id) {
                      item.skus.splice(j, 1) // 去除重复的对象；
                      console.log('不能添加重复的数据')
                      break
                    } else {
                      j++
                    }
                  }
                } */
                let newArr = item.skus.filter((currentValue, currentIndex, sourceArr) => {
                  return sourceArr.findIndex(x => x.id === currentValue.id) === currentIndex
                })
                item.skus = newArr
                // console.log(item.skus)
              }
              return {
                ...item,
                iconLoading,
                currentSku,
                promotionPrice
              }
            })
            return dataList
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('getList:' + err)
        })
    },
    // 尺码排序
    compare(property) {
      return function(a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    // 批量查询优惠价
    getPromotionPrice(list) {
      let data = {
        requestData: {
          productList: list,
          unionId: this.unionId
        }
        // user_id: this.userInfo.id
      }
      return batchGetProductPromotionPrice(data)
        .then(res => {
          if (res.code == 0) {
            return res.data.productList
          } else {
            this.$message.error(res.msg)
            return []
          }
        })
        .catch(err => {
          console.log('ProductPromotionPrice:' + err)
        })
    },
    // 批量查询用户的商品标签
    getBatchTags(list) {
      let data = {
        requestData: {
          productCodesAndColors: list,
          unionId: this.unionId
        }
      }
      return batchTagsByUnionIdAndskc(data).then(res => {
        return res
      })
    },
    async concatList(dataList) {
      this.productList = this.productList.concat(dataList)
      this.loadingBtn = true
      /* this.productList.sort((a, b) => {
        return a.currentSku.stock - b.currentSku.stock
      }).reverse() */

      if (this.current == this.pages) {
        this.loadingMore = false
        this.showBottom = true
      } else {
        this.showBottom = false
        this.loadingMore = true
      }
      if (this.productList.length == 0) return

      // 是否需要调用tag接口
      if (this.allowGetTag) {
        /****  2022-03-16 Start 平台优化一期  ****/
        let tagList = []
        for (let item of dataList) {
          tagList.push(`${item.name},${item.colorno}`)
        }

        let resultTags = await this.getBatchTags(tagList)
        if (resultTags.code == 0) {
          for (let item of dataList) {
            let tagItem = resultTags.data.filter(e => e.productCode == item.name && e.productColor == item.colorno)[0]
            item.tagStatus = tagItem.status
            item.inLook = tagItem.inLook
            item.topTags = tagItem.topTags
            item.preSales = tagItem.preSales
          }
        } else {
          this.$message.warning(resultTags.msg)
        }
        this.loadingBtn = false
      }

      // 是否需要调用优惠价
      if (this.allowGetPrice) {
        /****  2021-11-2 Start 查询优惠价  ****/
        const spuList = dataList.map(e => {
          return { spuId: e.m_product_id }
        })
        const priceList = await this.getPromotionPrice(spuList)
        for (let item of dataList) {
          let promotionPrice = priceList.filter(e => e.spuId == item.m_product_id)
          if (promotionPrice.length > 0) {
            item.promotionPrice = promotionPrice[0].promotionPrice
          } else {
            item.promotionPrice = item.price
          }
        }

        /****  2021-11-2 End 查询优惠价  ****/
      }
      /****  2022-03-16 END 平台优化一期  ****/

      // console.log(this.productList)
      this.$forceUpdate()
    },
    // 查询库存
    getStock(sku) {
      const data = {
        requestData: {
          // defaultSizeNo: this.queryParam.defaultSizeNo,
          skuIds: sku,
          unionId: this.unionId
        }
      }
      if (this.queryParam.storeId === '417608') {
        data.requestData.boxStock = true
      } else {
        data.requestData.boxStock = false
      }
      return queryStock(data)
        .then(res => {
          if (res.code === 0) {
            return res.data
          } else {
            this.$message.error(res.msg)
            return false
          }
        })
        .catch(err => {
          console.log('getStock:' + err)
        })
    },
    // 加载更多
    onLoadMore() {
      console.log('------onLoadMore-----')
      this.current = this.current + 1
      const param = JSON.parse(JSON.stringify(this.queryParam))
      // console.log('onLoadMore', param)
      this.fetchList(param)
    },
    // 选择尺码
    async sizeChange(e, index) {
      // console.log(e.target.value, index)
      const result = this.productList[index].skus.filter(item => item.sizeno === e.target.value)
      const sku = [result[0].id]
      const stock = await this.getStock(sku)
      this.productList[index].currentSku.stock = stock[0].stock
      this.productList[index].currentSku.id = stock[0].skuId.toString()
      this.productList[index].currentSku.ifEb = stock[0].ifEb
    },
    // 添加商品至购物车
    addGoods(item, index) {
      // yu
      if (this.isEmit) {
        this.productList[index].iconLoading = true
        setTimeout(() => {
          this.productList[index].iconLoading = false
          this.$emit('add', item)
        }, 300)
        return
      }
      //
      console.log(item, index)
      console.log(item.currentSku.id)
      if (item.currentSku.id === '') {
        this.$message.error('请选择尺码！')
      } else if (item.currentSku.stock === 0) {
        this.$message.error('该尺码库存为0！')
      } else {
        this.productList[index].iconLoading = true
        setTimeout(() => {
          this.productList[index].iconLoading = false
        }, 2000)
        const sku = item.skus.filter(sku => sku.id === item.currentSku.id)
        const value = {
          colorName: item.color_name,
          colorNo: item.colorno,
          imgUrl: item.imgurl,
          price: item.price,
          productCode: item.name,
          productId: item.id,
          productName: item.value,
          sizeName: sku[0].size_name,
          sizeNo: sku[0].sizeno,
          skuCode: sku[0].no,
          skuId: sku[0].id,
          productPrice: item.price,
          unionId: this.unionId // 'oZpUxs1utN7-JLtQAD5AMcW_nIPM'
        }
        // console.log(value)
        const data = {
          requestData: value,
          user_id: this.userInfo.id
        }
        addStylingCart(data)
          .then(res => {
            console.log(res)
            if (res.code === 0) {
              this.$message.success('添加成功！')
              this.$emit('refreshShoppingCart', true)
            } else {
              this.$message.error(res.msg, 5)
            }
          })
          .catch(err => {
            console.log('添加商品' + err)
          })
      }
    },
    // 查看商品信息
    open(item) {
      console.log(item)
      if (item.currentSku.id == '') {
        if (this.isBox) {
          this.$refs.goodInfoModal.show(item.id, item.skus[0].id)
        } else {
          // 微盟
          if (item.spuStock == 0) {
            this.$refs.goodInfoModal.show(item.id, item.skus[0].id, false)
          } else {
            this.$refs.goodInfoModal.show(item.id, item.skus[0].id)
          }
        }
      } else {
        if (this.isBox) {
          this.$refs.goodInfoModal.show(item.id, item.currentSku.id)
        } else {
          if (item.spuStock == 0) {
            this.$refs.goodInfoModal.show(item.id, item.currentSku.id, false)
          } else {
            this.$refs.goodInfoModal.show(item.id, item.currentSku.id)
          }
        }
      }

      /* const data = {
        requestData: {
          productId: item.id,
          skuId: item.currentSku.id
        }
      }
      goodsDetail(data)
        .then(res => {
          if (res.code === 0) {
            this.$emit('openInfo', true, res.data, '商品库')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('查看商品信息:' + err)
        }) */
    },
    // 筛选条件
    updateParams(data) {
      let paramsArr = JSON.parse(JSON.stringify(data))
      // console.log('updateParams:', paramsArr)
      if (paramsArr.length > 0) {
        let brandItem = paramsArr.filter(e => e.title == '品牌')
        this.queryParam.brandIds = brandItem[0].codes

        let seasonItem = paramsArr.filter(e => e.title == '季节')
        this.queryParam.seasonIds = seasonItem[0].codes

        let yearItem = paramsArr.filter(e => e.title == '年份')
        this.queryParam.years = []
        if (yearItem[0].checkValue.length > 0) {
          for (let child of yearItem[0].checkValue) {
            if (child.name == '其他年份') {
              let arr = child.code.map(e => e.code)
              this.queryParam.years = [...this.queryParam.years, ...arr]
            } else {
              this.queryParam.years.push(child.code)
            }
          }
        }

        let smallCategory = paramsArr.filter(e => e.title == '类目')
        this.queryParam.smallCategoryIds = smallCategory[0].codes

        let sizeItem = paramsArr.filter(e => e.title == '尺码')
        this.queryParam.sizeNos = sizeItem[0].codes

        this.searchList()
        // console.log('--------search-------')
      }
    },
    updateSearchText(text) {
      this.queryParam.name = text
      /* 搜索款号时，按销量排序 */
      if (this.queryParam.name != '') {
        this.queryParam.sorted = 2
      }

      // this.searchList()
    },
    handleScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      //变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight

      //滚动条到底部的条件
      if (scrollTop + windowHeight + 20 >= scrollHeight && this.isRefreshBool) {
        // console.log('距顶部' + scrollTop + '可视区高度' + windowHeight + '滚动条总高度' + scrollHeight)
        this.isRefreshBool = false
        this.showBottom = true
        if (this.current == this.pages) {
          this.loadingMore = false
        } else {
          this.loadingMore = true
          this.onLoadMore()
        }
      }
    },
    handleDrawScroll() {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = this.$refs.productContainer.scrollTop
      //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      //变量scrollHeight是滚动条的总高度
      var scrollHeight = this.$refs.productContainer.scrollHeight
      // 元素位置
      var rect = this.$refs.productContainer.getBoundingClientRect()

      if (windowHeight - rect.top >= scrollHeight && this.isRefreshBool) {
        // console.log('距顶部' + scrollTop + '可视区高度' + windowHeight + '滚动条总高度' + scrollHeight, rect)
        // console.log(windowHeight - rect.top, scrollHeight)
        this.isRefreshBool = false
        this.showBottom = true
        if (this.current == this.pages) {
          this.loadingMore = false
        } else {
          this.loadingMore = true
          this.onLoadMore()
        }
      }
    },
    // 商详抽屉
    // showGoodInfo(record) {
    //   this.$refs.goodInfoModal.show(record.productId, record.skuId)
    // },
    // 查看推荐LOOK
    showRecommend(item) {
      let good = {
        colorName: item.color_name,
        colorNo: item.colorno,
        productCode: item.name,
        productId: item.id,
        productName: item.value
      }
      this.$refs.recommendLookDraw.show(good)
    },
    updateShoppingCart(value) {
      if (value) this.$emit('refreshShoppingCart', true)
    },
    // 查看相似商品
    openSimilar(item) {
      // this.$emit('openSimilar', item)
      this.$refs.similarGoodsDraw.show(item)
    },
    // 发送商品
    sendProduct(item, e) {
      if (e) e.target.firstElementChild.innerText = '再次发送'

      this.$emit('sendProduct', item)
    },
    sendLook(obj) {
      this.$emit('sendLook', obj)
    },
    //
    triggerTooltip(visible, item) {
      // if (item.skuOptions && item.skuOptions.length > 0) return
      if (visible) {
        this.getGoodSpu(item, item.id, this.storeIdByLink, this.weid)
      } else {
        item.skuOptions = []
        this.$forceUpdate()
      }
    }
  }
}
</script>
<style lang="less" scoped src="../style/style.less"></style>
<style lang="less" scoped>
.ant-pro-components-tag-select {
  /deep/ .ant-pro-tag-select .ant-tag {
    margin-right: 24px;
    padding: 0 8px;
    font-size: 14px;
  }
}
.table-page-search-wrapper {
  /deep/.ant-form-item-label {
    padding-left: 24px;
  }
}
.ant-pro-pages-list-projects-cardList {
  margin-top: 12px;
  height: 100%;
  min-height: 200px;
  overflow-y: auto;
  /deep/ .ant-row {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: repeat(auto-fill, 172px);
    // grid-row-gap: 16px;
    grid-column-gap: 8px;
  }
  /deep/ .ant-row::before {
    content: '';
    width: 0;
    display: none;
  }

  /deep/ .ant-list-item {
    margin-bottom: 24px;
    .ant-card-hoverable {
      cursor: default;
    }
  }
  /deep/ .ant-card {
    width: 172px;
    position: relative;
    overflow: hidden;
    padding: 12px;
  }
  /deep/ .ant-card-hoverable:hover {
    border: 1px solid #1890ff;
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
  }
  /deep/ .ant-card-meta-title {
    margin-bottom: 4px;
  }
  /deep/ .ant-card-meta-description {
    height: 44px;
    overflow: hidden;
    line-height: 22px;
  }
  /deep/ .ant-card-cover {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    background: #fff;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
      border-radius: 4px;
    }
  }
  /deep/ .ant-card-body {
    padding: 0 0 12px;
    position: relative;
    min-height: 234px;
    > p {
      margin-top: -30px;
      background: rgba(0, 0, 0, 0.4);
      line-height: 30px;
      color: #fff;
      text-align: center;
      font-size: 12px;
      border-radius: 0 0 4px 4px;
    }
    .tag {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 22px;
      position: absolute;
      top: -122px;
      left: -12px;
      z-index: 2;
      padding: 0 8px;
      &.red {
        background: #ff7d76;
      }
      &.yellow {
        background: #efb041;
      }
      &.green {
        background: #87d068;
      }
    }
    .recommend-look {
      background: rgba(24, 144, 255, 0.8);
      border-radius: 2px 0px 0px 2px;
      top: -60px;
      line-height: 22px;
      margin: 0;
      /* background: #1890ff;
      border-radius: 2px 0px 0px 2px;
      opacity: 0.8;
      height: 22px;
      
      color: #fff;
      font-size: 12px;
      padding: 0 6px;
      position: absolute;
      right: 0;
      border-radius: 2px 0px 0px 2px;
      top: -32px;
      cursor: pointer;
      z-index: 2; */
    }
  }
  .cardItemContent {
    padding: 0px 0px 6px;
    line-height: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    > p {
      color: #cdcdcd;
      font-size: 12px;
      line-height: 20px;
      margin-bottom: 0;
    }
    > h3 {
      font-size: 16px;
      line-height: 28px;
      margin-bottom: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .topping {
        height: 22px;
        border-radius: 2px;
        border: 1px solid #1890ff;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1890ff;
        line-height: 22px;
        padding: 0 4px;
        margin-right: 4px;
        display: block;
        float: left;
        margin-top: 3px;
      }
    }
    .price {
      display: flex;
      align-items: center;
    }
    .red {
      color: #f45555;
      font-size: 14px;
      line-height: 26px;
    }
    .origin {
      font-size: 12px;

      font-weight: 400;
      color: #8c8c8c;
      line-height: 26px;
    }
    .blue {
      color: #1890ff;
    }
    .size-box {
      padding-top: 8px;
      .ant-radio-button-wrapper {
        text-align: center;
        line-height: 24px;
        height: 26px;
        border-radius: 6px;
        margin-right: 8px;
        margin-bottom: 8px;
        min-width: 30px;
        padding: 0;
        border: 1px solid #d9d9d9;
        span {
          line-height: 24px;
          padding: 0 4px;
        }
      }
      .ant-radio-button-wrapper:not(:first-child)::before {
        display: none;
      }
      .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
        box-shadow: none;
      }
    }
    /deep/ .ant-pro-avatar-list {
      flex: 0 1 auto;
    }
    /deep/.ant-skeleton-title {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
  .btn {
    position: absolute;
    bottom: 4px;
    height: 24px;
    width: 148px;
    button {
      height: 24px;
      border-radius: 6px;
    }
    button:active {
      transform: scale(0.9);
    }
  }
  /deep/ .ant-list-pagination {
    margin-top: 0;
  }
}
.l-h-price {
  position: relative;
}
.readonly-content {
  display: flex;
  align-items: center;
  cursor: text;
  label {
    padding-right: 8px;
    white-space: nowrap;
  }
  .price-readonly {
    height: 32px;
    padding: 4px 11px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    width: 70px;
    display: inline-block;
  }
}
.show-change {
  background: #fff;
  position: relative;
  z-index: 2;
  width: 270px;
  margin-bottom: 24px;
  .input-content {
    position: relative;
    z-index: 3;
  }
  .ant-form-item {
    margin-bottom: 12px;
  }
  .change-price-btn {
    position: absolute;
    padding: 53px 12px 12px 0;
    box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
    background: #fff;
    border: 1px solid #bfbfbf;
    top: -12px;
    left: -12px;
    z-index: 2;
    width: calc(100% + 36px);
    display: flex;
    justify-content: flex-end;
  }
  .change-content {
    width: 190px;
    .ant-input-number {
      width: 70px;
    }
  }
}
.bottom-tip {
  text-align: center;
  line-height: 100px;
  height: 100px;
  font-size: 14px;
}
/deep/ .filter-tree {
  padding-bottom: 12px !important;
}
.multi-btn {
  display: flex;
  justify-content: space-between;
  /deep/.ant-btn {
    padding: 0 6px;
  }
}
</style>

